//创建一个路由器，并暴露出去
//第一步：引入createRouter
import { createRouter, createWebHistory } from "vue-router";
//引入路由组件
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import About from "@/pages/About.vue";
import Detail from "@/pages/Detail.vue";
import Props from "@/pages/01_props/Father.vue";
import Event from "@/pages/02_custom-event/Father.vue";
import Mitt from "@/pages/03_mitt/Father.vue";
import Model from "@/pages/04_v-model/Father.vue";
import AttrsListeners from "@/pages/05_$attrs/Father.vue";
import RefChildParent from "@/pages/06_$refs-$parent/Father.vue";
import ProvideInject from "@/pages/07_provide-inject/Father.vue";
import Pinia from "@/pages/08_pinia/Father.vue";
import Slot from "@/pages/09_slot/Father.vue";
import shallowRefReactive from "@/pages/shallowRef-shallowReactive/index.vue";
import readonlyshallowReadonly from "@/pages/readonly-shallowReadonly/index.vue";
import toRawmarkRaw from "@/pages/toRaw-markRaw/index.vue";
import customRef from "@/pages/customRef/index.vue";
import Teleport from "@/pages/Teleport/index.vue";
import SuspenseDemo from "@/pages/SuspenseDemo/Father.vue";

//第二步：创建路由器
const router = createRouter({
  history: createWebHistory(), //路由器的工作模式
  routes: [
    //一个一个的路由规则
    {
      path: "/",
      redirect: "/home", //redirect路由重定向
    },
    {
      name: "home",
      path: "/home",
      component: Home,
    },
    {
      name: "news",
      path: "/news",
      component: News,
      children: [
        // {
        //   path: "detail", //子级路由不需要加'/'
        //   component: Detail,
        // },
        // {
        //   name: "detail",
        //   path: "detail/:id/:title/:content?", //子级路由不需要加'/'  如果content不传递，可选的，就添加?
        //   component: Detail,
        // },
        {
          name: "detail",
          path: "detail/:id/:title/:content?", //子级路由不需要加'/'  如果content不传递，可选的，就添加?
          component: Detail,
          //第一种写法：将路由收到的所有params参数，作为props传给路由组件
          // props: true, //增加这行就可以在Detail.vue页面使用defineProps()获取路由参数了
          //第二种写法：函数写法：可以自己决定将什么作为props给路由组件-- return出去
          props(route) {
            console.log("@@route", route);
            return route.params; //params这种写法直接用上面的props:true 就可以了，不需要这个
            // return route.query;//query这种推荐用这种写法
          },
          //第三种写法：对象写法：可以自己决定将什么作为props给路由组件--这种写法是写死的，不用这种
          // props: {
          //   id: "10",
          //   title: "标题10",
          //   content: "内容10",
          // },
        },
      ],
    },
    {
      name: "about",
      path: "/about",
      component: About,
    },
    {
      name: "Props",
      path: "/props",
      component: Props,
    },
    {
      name: "Event",
      path: "/event",
      component: Event,
    },
    {
      name: "Mitt",
      path: "/mitt",
      component: Mitt,
    },
    {
      name: "Model",
      path: "/model",
      component: Model,
    },
    {
      name: "AttrsListeners",
      path: "/attrs",
      component: AttrsListeners,
    },
    {
      name: "RefChildParent",
      path: "/refChildParent",
      component: RefChildParent,
    },
    {
      name: "ProvideInject",
      path: "/provideInject",
      component: ProvideInject,
    },
    {
      name: "Pinia",
      path: "/pinia",
      component: Pinia,
    },
    {
      name: "Slot",
      path: "/slot",
      component: Slot,
    },
    {
      name: "shallowRefReactive",
      path: "/shallowRefReactive",
      component: shallowRefReactive,
    },
    {
      name: "readonlyshallowReadonly",
      path: "/readonlyshallowReadonly",
      component: readonlyshallowReadonly,
    },
    {
      name: "toRawmarkRaw",
      path: "/toRawmarkRaw",
      component: toRawmarkRaw,
    },
    {
      name: "customRef",
      path: "/customRef",
      component: customRef,
    },
    {
      name: "Teleport",
      path: "/Teleport",
      component: Teleport,
    },
    {
      name: "SuspenseDemo",
      path: "/SuspenseDemo",
      component: SuspenseDemo,
    },
  ],
});
export default router; //暴露路由器出去
